<template>
    <popup
        :show="showEdit"
        title="编辑"
        :loading="loading"
        :async-close="true"
        width="460px"
        @close="emits('close')"
        @confirm="handleSubmit"
    >
        <div class="p-6 pb-0">
            <el-form ref="formRef" :model="formData" label-width="80px">
                <el-form-item label="图片" prop="image_loc">
                    <material-picker
                        v-model="formData.image_loc"
                        :disabled="formData.source === 2"
                    />
                </el-form-item>
                <el-form-item label="所属分类" prop="cate_id">
                    <el-select
                        v-model="formData.cate_id"
                        placeholder="请选择所属类目"
                        clearable
                    >
                        <el-option :value="0" label="全部" />
                        <el-option
                            v-for="(item, index) in categoryList"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item v-if="formData.id" label="来源方式" prop="source">
                    <el-select v-model="formData.source" :disabled="true">
                        <el-option :value="1" label="官方" />
                        <el-option :value="2" label="用户" />
                    </el-select>
                </el-form-item>
                <el-form-item label="中文提示词" prop="prompt_in">
                    <el-input
                        :disabled="formData.source === 2"
                        class="w-[380px]"
                        v-model="formData.prompt_in"
                        type="textarea"
                        :autosize="{ minRows: 4, maxRows: 20 }"
                        :placeholder="formData.source === 1 ? '请输入中文提示词' : ''"
                    />
                </el-form-item>
                <el-form-item label="英文提示词" prop="prompt_en">
                    <el-input
                        :disabled="formData.source === 2"
                        class="w-[380px]"
                        v-model="formData.prompt_en"
                        type="textarea"
                        :autosize="{ minRows: 4, maxRows: 20 }"
                        :placeholder="formData.source === 1 ? '请输入英文提示词' : ''"
                    />
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="formData.sort" :min="0" :max="999999" />
                </el-form-item>
                <el-form-item label="状态" prop="is_enable">
                    <el-radio-group v-model="formData.is_enable">
                        <el-radio :value="1">显示</el-radio>
                        <el-radio :value="0">隐藏</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
    </popup>
</template>

<script setup lang="ts">
import feedback from '@/utils/feedback'
import squareCategoryApi from '@/api/square/category'
import squareDrawsApi from '@/api/square/draws'

const emits = defineEmits(['success', 'close'])

const formRef = ref()
const showEdit = ref<boolean>(false)
const categoryList = ref<any[]>([])

// 表单数据
const loading = ref(false)
const formData: any = reactive({
    id: '',        // 广场ID
    cate_id: '',   // 分类ID
    source: 1,     // 来源方式
    image_loc: '', // 图片地址
    prompt_in: '', // 输入提示词
    prompt_en: '', // 英文提示词
    sort: 0,       // 排序编号
    is_enable: 0   // 是否显示:[0=否, 1=是]
})

/**
 * 提交表单
 */
const handleSubmit = async (): Promise<void> => {
    await formRef.value?.validate()
    loading.value = true

    await squareDrawsApi.edit(formData)
        .finally(() => {
            loading.value = false
        })

    feedback.msgSuccess('操作成功')
    emits('close')
    emits('success')
}

/**
 * 打开表单
 *
 * @param {any} row
 * @returns {Promise<void>}
 */
const open = async (row?: any): Promise<void> => {
    showEdit.value = true
    categoryList.value = await squareCategoryApi.whole({ type: 'draws' })
    for (const key in formData) {
        if (row[key] !== null && row[key] !== undefined) {
            formData[key] = row[key]
        }
    }
}

defineExpose({
    open
})
</script>
